<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用内浏览器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: #1a1a1a;
            color: white;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        
        .browser-toolbar {
            background: #2d2d2d;
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #404040;
            flex-shrink: 0;
        }
        
        .browser-button {
            background: #404040;
            border: none;
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .browser-button:hover:not(:disabled) {
            background: #505050;
        }
        
        .browser-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .url-bar {
            flex: 1;
            background: #1a1a1a;
            border: 1px solid #404040;
            color: white;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }
        
        .url-bar:focus {
            border-color: #51cf66;
        }
        
        .loading-indicator {
            width: 16px;
            height: 16px;
            border: 2px solid #404040;
            border-top-color: #51cf66;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            display: none;
        }
        
        .loading-indicator.active {
            display: block;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .browser-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        webview {
            flex: 1;
            width: 100%;
            height: 100%;
        }
        
        .error-message {
            display: none;
            padding: 20px;
            text-align: center;
            color: #ff6b6b;
        }
        
        .error-message.show {
            display: block;
        }
    </style>
</head>
<body>
    <div class="browser-toolbar">
        <button class="browser-button" id="back-btn" onclick="goBack()" title="后退">
            ← 后退
        </button>
        <button class="browser-button" id="forward-btn" onclick="goForward()" title="前进">
            前进 →
        </button>
        <button class="browser-button" id="reload-btn" onclick="reload()" title="刷新">
            🔄 刷新
        </button>
        <input type="text" class="url-bar" id="url-input" placeholder="输入网址或搜索..." onkeypress="handleUrlKeyPress(event)">
        <button class="browser-button" id="go-btn" onclick="navigate()" title="前往">
            🚀 前往
        </button>
        <div class="loading-indicator" id="loading-indicator"></div>
    </div>
    
    <div class="browser-content">
        <webview id="webview" src="https://www.openharmony.cn" allowpopups></webview>
        <div class="error-message" id="error-message"></div>
    </div>
    
    <script>
        const webview = document.getElementById('webview');
        const urlInput = document.getElementById('url-input');
        const backBtn = document.getElementById('back-btn');
        const forwardBtn = document.getElementById('forward-btn');
        const reloadBtn = document.getElementById('reload-btn');
        const loadingIndicator = document.getElementById('loading-indicator');
        const errorMessage = document.getElementById('error-message');
        
        let currentWindowId = null;
        
        // 获取初始URL（从查询参数）
        const urlParams = new URLSearchParams(window.location.search);
        const initialUrl = urlParams.get('url') || 'https://www.openharmony.cn';
        
        // 设置初始URL
        urlInput.value = initialUrl;
        webview.src = initialUrl;
        
        // 监听webview事件
        webview.addEventListener('did-start-loading', () => {
            loadingIndicator.classList.add('active');
            reloadBtn.disabled = true;
        });
        
        webview.addEventListener('did-stop-loading', () => {
            loadingIndicator.classList.remove('active');
            reloadBtn.disabled = false;
            updateNavigationButtons();
        });
        
        webview.addEventListener('did-navigate', (event) => {
            urlInput.value = event.url;
            updateNavigationButtons();
            errorMessage.classList.remove('show');
        });
        
        webview.addEventListener('did-navigate-in-page', (event) => {
            urlInput.value = event.url;
            updateNavigationButtons();
        });
        
        webview.addEventListener('did-fail-load', (event) => {
            loadingIndicator.classList.remove('active');
            reloadBtn.disabled = false;
            
            if (event.errorCode !== -3) { // -3 是用户取消，不算错误
                errorMessage.textContent = `加载失败: ${event.errorDescription || '未知错误'} (错误代码: ${event.errorCode})`;
                errorMessage.classList.add('show');
            }
        });
        
        webview.addEventListener('page-title-updated', (event) => {
            document.title = event.title || '应用内浏览器';
        });
        
        // 更新导航按钮状态
        function updateNavigationButtons() {
            backBtn.disabled = !webview.canGoBack();
            forwardBtn.disabled = !webview.canGoForward();
        }
        
        // 导航函数
        function navigate() {
            let url = urlInput.value.trim();
            
            if (!url) {
                return;
            }
            
            // 如果没有协议，添加 https://
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                // 检查是否是域名格式
                if (url.includes('.') && !url.includes(' ')) {
                    url = 'https://' + url;
                } else {
                    // 否则作为搜索查询
                    url = 'https://www.baidu.com/s?wd=' + encodeURIComponent(url);
                }
            }
            
            webview.src = url;
            errorMessage.classList.remove('show');
        }
        
        // 处理URL输入框回车
        function handleUrlKeyPress(event) {
            if (event.key === 'Enter') {
                navigate();
            }
        }
        
        // 后退
        function goBack() {
            if (webview.canGoBack()) {
                webview.goBack();
            }
        }
        
        // 前进
        function goForward() {
            if (webview.canGoForward()) {
                webview.goForward();
            }
        }
        
        // 刷新
        function reload() {
            webview.reload();
        }
        
        // 初始化
        updateNavigationButtons();
    </script>
</body>
</html>

